<template>
  <div>
    <!-- 外部 -->
    <el-dialog
      class="dialog"
      title="选择商品"
      :visible.sync="visibleSelect"
      :before-close="seckillGoodsClose"
      width="80%"
      top="6vh"
    >
      <div class="bottom-content">
        <div class="d-flex">
          <Search v-if="!isEdit" placeholder="请输入名称" class="mr-15" @search="handleSearch" />
          <el-form
            :inline="true"
            class="demo-form-inline mr-15"
            style="white-space: nowrap; margin: 0"
          >
            <el-form-item v-if="!isEdit" label="分类筛选：" style="margin: 0">
              <el-cascader
                v-model="kind"
                size="small"
                :options="kindList"
                :props="casProps"
                expand-trigger="hover"
                clearable
                @change="handleCascader"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="mt-35">
          <el-table
            ref="multipleTable"
            :data="listMng"
            tooltip-effect="dark"
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column label="图片" width="100">
              <template slot-scope="scope">
                <div>
                  <el-avatar :size="60" :src="scope.row.img_show" shape="square" />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="名称" width>
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column prop="price" label="现价" width />
            <el-table-column prop="sold_out" label="现有销量" />
            <el-table-column prop="inventory" label="实际库存" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="addCluster(scope.row)">添加</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <Pagination
          v-if="!isEdit"
          class="pagination"
          :total="total"
          :cur-page="currentPgae"
          @nextPage="handleNextPage"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Search from '@/common/input'
import Pagination from '@/common/pagination'
import {
  getSecKillGoodsMngList
} from '@/api/seckill'
import { getPropClassList } from '@/api/good-mng'
const ERR_OK = 200
export default {
  components: {
    Search,
    Pagination
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      calcuInventory: '',
      circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      visibleSelect: false,
      query: '',
      value1: '',
      multipleSelection: [],
      currentPgae: 1,
      listMng: [],
      listSpec: [],
      formlist: [],
      limit_num: 0,
      kindList: [],
      specName: '',
      total: 0,
      casProps: {
        expandTrigger: 'hover',
        // checkStrictly: true,
        value: 'id',
        label: 'kind_name',
        children: 'lower'
      },
      kind: [],
      second_cate_id: '',
      clusterList: []
    }
  },
  watch: {
    isEdit(newVal) {
    }
  },
  created() {
    getPropClassList().then(res => {
      if (res.code === 200) {
        this.kindList = res.data
      }
    })
    this._getSecKillGoodsMngList({ page: this.currentPgae })
  },
  methods: {
    seckillGoodsClose() {
      this.visibleSelect = false
    },
    handleCascader(val) {
      this.currentPgae = 1
      const second_cate_id = val[1]
      this.second_cate_id = second_cate_id
      this._getSecKillGoodsMngList({
        page: this.currentPgae,
        keyword: this.query,
        second_cate_id
      })
    },
    handleNextPage(page) {
      this.currentPgae = page
      this._getSecKillGoodsMngList({
        page: this.currentPgae,
        keyword: this.query,
        second_cate_id: this.second_cate_id
      })
    },
    show() {
      this.visibleSelect = true
    },
    handleSearch(query) {
      this.query = query
      this.currentPgae = 1
      this._getSecKillGoodsMngList({
        page: this.currentPgae,
        keyword: this.query
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    addCluster(row) {
      this.clusterList = [row]
      this.$emit('pushClusterItemSucc', this.clusterList)
    },
    statusChange(row) {},
    _getSecKillGoodsMngList({ page, keyword, second_cate_id }) {
      getSecKillGoodsMngList({ page, keyword, second_cate_id })
        .then(res => {
          if (res.code === ERR_OK) {
            this.listMng = res.data.list

            this.total = res.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
@import "@/styles/el-button.scss";
.el-button:hover {
  color: #fff;
}
.el-button {
  color: #ffff;
}
.el-dialog__wrapper /deep/.el-dialog__headerbtn {
  position: absolute;
  top: -30px;
  right: 0;
  border-radius: 50%;
  background: #fff;
  width: 25px;
  height: 25px;
  font-size: 22px;
}
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.d-flex {
  display: flex;
  align-items: center;
}
.mt-35 {
  margin-top: 35px;
}
.mr-15 {
  margin-right: 15px;
}
.pagination {
  justify-content: center;
}
.dialog{
  min-width: 1200px;
}
</style>
